import { ThemedView } from "@/components/ThemedView";
import { useThemeColor } from "@/hooks/useThemeColor";
import AntDesign from "@expo/vector-icons/AntDesign";
import { Link, useNavigation } from "expo-router";
import { useEffect, useState } from "react";
import { ScrollView, TextInput, TouchableOpacity } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";

export default function PrivateChatScreen() {
    const navigator = useNavigation()
    const insets = useSafeAreaInsets();
    const [collapse, setCollapse] = useState(true)
    const titleColor =useThemeColor({light: 'black', dark: 'white'},"text")
    //挂摘时候设置标题
    useEffect(() => {
        navigator.setOptions({
            title: 'Rocc',
            headerRight: () => <AntDesign name={'ellipsis1'} size={20}
                                          color={titleColor}/>
        })
    }, []);

    return (
        <ThemedView style={{
            paddingBottom: insets.bottom
        }}>
            <ThemedView className={'w-full h-full flex'}>
                <ScrollView className={'flex-1 '}>
                </ScrollView>
                <ThemedView className={'border-t border-gray-100 p-2'}>
                    <ThemedView className={'flex flex-row items-center justify-between'}>

                        <TextInput className={'flex-1 me-1 rounded-lg border border-gray-100 px-2'}/>
                        <TouchableOpacity className={'p-2 '} onPress={() => setCollapse(!collapse)}>
                            <AntDesign name={'plus'} size={20} color={'gray'}/>
                        </TouchableOpacity>
                    </ThemedView>
                    {
                        collapse ?
                            <ThemedView className={' pt-3 flex flex-row'}>

                                <Link href={'/video_call'} className={'p-5  me-2 rounded border-2 border-gray-100'}>
                                <AntDesign name="camera" size={30} color={'gray'}/>
                                </Link>
                                <Link href={'/video_call'} className={'p-5  me-2 rounded border-2 border-gray-100'}>
                                    <AntDesign name={'videocamera'} size={30} color={'gray'}/>
                                </Link>
                                <Link href={'/video_call'}
                                      className={'p-5 border me-2 border-2 border-gray-100 rounded '}>
                                    <AntDesign name={'gift'} size={30} color={'gray'}/>
                                </Link>
                            </ThemedView> : null
                    }
                </ThemedView>
            </ThemedView>
        </ThemedView>
    );
}